//代运营页面-----账号管理
import React,{Component} from 'react'
import {Modal,Table,message} from 'antd'
import SearchPanel from '../../../components/SearchPanel/SearchPanel'
import Button from '../../../components/button/button'
import $ from 'jquery';
import * as tools from '../../../tools/tools.js';
import OperationModifyAccount from '../OperationModifyAccount/OperationModifyAccount'   //添加账号

class OperationAccount extends Component{
  constructor(props){
    super(props)
    this.columns=[
      {
        title: '账号',
        dataIndex: 'username',
        key: 'usernameAccount',
        fixed: 'left'
      },
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'nameAccount',
      },
      {
        title: '手机',
        dataIndex: 'mobile',
        key: 'mobileAccount',
      },
      {
        title: '状态',
        dataIndex: 'status',
        key: 'statusAccount',
        render:(text)=><span>{text ==-1?"禁用":"启用"}</span>
      },
      {
        title: '银行卡持有人',
        dataIndex: 'cash_name',
        key: 'cash_nameAccount'
      },
      {
        title: '银行卡号',
        dataIndex: 'cash_card',
        key: 'cash_cardAccount',
      },
      {
        title: '拥有店铺',
        dataIndex: 'operate_shopxxx',
        key: 'operate_shopAccount',
        render:()=><span style={{color:'#4C8EDB',cursor:'pointer'}} onClick={this.clickdetails}>查看</span>
      }
    ]
    this.state={
      searchKeys:[
        {
          id : 'username',
          name : '账号',
          type : 1,
        },
        {
          id : 'name',
          name : '姓名',
          type : 1,
        },
        {
          id : 'mobile',
          name : '手机',
          type : 1,
        },
      ],
      newbutton:{
        background: '#D8D8D8',
        borderRadius: '100px',
        width:'88px',
        height:'30px',
        color:'#999999',
        marginLeft:'30px',
      },
      disabled:'disabled',
      checkeddata:null,
      Modifyvisible:false
    }
  }

  componentWillMount(){
    // tools.loginView(this).then(
      $.ajax({
        url:tools.apiUrl+"operation/operate_account_list",
        type :'Post',
        data:{
          token:localStorage.token
        },
        success:(res)=>{
          if(res.status == 1){
            this.setState({
              AccountData:res.result.data
            })
          }else{
            message.error(res.msg)
          }
        }
      })
    // )
  }

  handleSubmit=()=>{      //modal确认回调
    // this.props.form.resetFields();
  }
  rowSelection = {      //单选产的函数
    onChange: (selectedRowKeys, selectedRows) => {
      if(selectedRowKeys.length == 1){
        this.setState({
          newbutton:{
            border:'1px solid #4A90E2',
            borderRadius: '100px',
            width:'88px',
            height:'30px',
            color:'#4A90E2',
            marginLeft:'30px'
          },
          disabled:false,
          checkeddata:selectedRows[0]
        })
      }else{
        this.setState({
          newbutton:{
            background: '#D8D8D8',
            borderRadius: '100px',
            width:'88px',
            height:'30px',
            color:'#999999',
            marginLeft:'30px',
          },
          disabled:'disabled'
        })
      }
    },
    type: 'radio',
  }
  clickdetails=()=>{      //查看详情

  }

  pagechange=(pagination, filters, sorter)=>{  //换页时函数
    tools.loginView(this).then(
      $.ajax({
        url:tools.apiUrl+"operation/operate_account_list?page="+pagination.current,
        type :'Post',
        data:{
          token:localStorage.token
        },
        success:(res)=>{
          if(res.status == 1){
            this.setState({
              AccountData:res.result.data
            })
          }
        }
      })
    )
  }

  searchSubmit = (data) => {        // from点击确认提交产生的数据---搜索
    data.token = localStorage.token;
    tools.loginView(this).then(
      $.ajax({
        url:tools.apiUrl+"operation/operate_account_list",
        type :'Post',
        data:data?data:{},
        success:(res)=>{
          if(res.status == 1){
            this.setState({
              AccountData:res.result.data,
              AccountPage:res.result.last_page
            })
          }else{
            message.error(res.msg)
          }
        }
      })
    )
  }

  Operationcancel=()=>{   //modal取消
    this.props.onCancel();
    // this.props.form.resetFields();
}

Enable=(obj)=>{
  tools.loginView(this).then(
    $.ajax({
      type:'post',
      url:tools.apiUrl+"operation/operate_account_status",
      data:{
        token:localStorage.token,
        id:this.state.checkeddata.id,
        status:obj,
      },
      success:(res)=>{
        if(res.status ==1){
          $.ajax({
            url:tools.apiUrl+"operation/operate_account_list",
            type :'Post',
            data:{
              token:localStorage.token
            },
            success:(res)=>{
              if(res.status == 1){
                this.setState({
                  AccountData:res.result.data
                })
              }
            }
          })
        }else{
          message.error(res.msg)
        }
      }
    })
  )
}

addAcount=(obj)=>{
  this.setState({
    Modifyvisible:true,
    Modifytype:obj
  })
}

ModifyAccountCancel=()=>{
  tools.loginView(this).then(
    $.ajax({
      url:tools.apiUrl+"operation/operate_account_list",
      type :'Post',
      data:{
        token:localStorage.token
      },
      success:(res)=>{
        if(res.status == 1){
          this.setState({
            AccountData:res.result.data,
            Modifyvisible:false
          })
        }
      }
    })
  )
}
  render(){
    const newbutton={
      border:'1px solid #4A90E2',
      borderRadius: '34px',
      width:'88px',
      height:'30px',
      color:'#4A90E2',
      marginLeft:'30px'
    }

    return(
      <Modal
      title="账号管理" 
      className="modal_box"
      visible={this.props.show}
      maskClosable={false}
      onOk={this.handleSubmit}
      onCancel={this.Operationcancel}
      bodyStyle={{height:'700px',overflow: 'auto'}}
      >
      <div className="city_search">
      <SearchPanel
          onSearchCb={this.searchSubmit}
          searchKeys={this.state.searchKeys}/>
      </div>
        <div className="city_biaotou">
          <Button key="btn1" datastyle={newbutton} onClick={()=>this.addAcount(1)}>新建</Button> 
          <Button key="btn2" datastyle={this.state.newbutton} disabled={this.state.disabled} onClick={()=>this.addAcount(2)}>编辑</Button> 
          <Button key="btn3" datastyle={this.state.newbutton} disabled={this.state.disabled}  onClick={()=>this.Enable(-1)}>停用</Button> 
          <Button key="btn4" datastyle={this.state.newbutton} disabled={this.state.disabled}  onClick={()=>this.Enable(1)}>启用</Button> 
        </div>
        <Table
          columns={this.columns} 
          rowSelection={this.rowSelection}
          dataSource={this.state.AccountData}
          onChange={this.pagechange}
          scroll={{ x: 700 }} 
          pagination={{pageSize: 3 ,showQuickJumper:true,totle:(this.state.AccountPage*10)}}>
        >
        </Table>
        <OperationModifyAccount show={this.state.Modifyvisible} onCancel={this.ModifyAccountCancel} 
        Modifytype={this.state.Modifytype} checkeddata={this.state.Modifytype ==2?this.state.checkeddata:false}></OperationModifyAccount>
      </Modal>
    )
  }
}
export default OperationAccount